var React = require('react');
var FlowCanvas = require('../../controls/graph/FlowCanvas');
module.exports = React.createClass({
	getInitialState: function () {
		return {
			data: {
				nodes: [
	                {
	                    id: 1, x: 50, y: 50, width:100, height: 100,
	                    style: 'border:1px solid red;'
	                },
	                {
	                    id: 2, x: 250, y: 250, width:100, height: 100,
	                    style: 'border:1px solid red;'
	                },
	                { id: 3, x: 50, y: 250, width:100, height: 100, style: 'border:1px solid red;'},
	                { id: 4, x: 250, y: 50, width:100, height: 100, style: 'border:1px solid red;'}
	            ],
	            links: [
	                { target: '1', source: '2'},
	                { target: '2', source: '3'},
	                { target: '2', source: '4'},
	                { target: '3', source: '4'},
	                { target: '1', source: '4'}
	            ]
			}
		}
	},
	componentDidMount: function (){
		this.state.data.links.push({ target: '1', source: '3'});

		this.setState({
			data: this.state.data
		});
	},
	render:function(){

		return (
			<div className="v-flow" style={{position: 'absolute'}}>
				<FlowCanvas data={this.state.data} />
			</div>
		);
	}
});
